<template>
    <div>
        <h3>角色添加</h3>
        <el-form label-width="80px" :model="formInline" class="demo-form-inline">
            <el-form-item label="角色名">
                <el-input v-model="formInline.namezh" style="width:220px" placeholder="角色名"></el-input>
            </el-form-item>
            <el-form-item label="权限选择">
                <el-tree :data="treeData" ref="tree" show-checkbox node-key="id" style="width:220px">
                </el-tree>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">添加</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="编号" width="180">
            </el-table-column>
            <el-table-column prop="namezh" label="角色名" width="180">
                <template slot-scope="scope">
                    <el-popover trigger="click" placement="top" @hide='min_edit(scope.$index, scope.row)'>
                        <div>
                            <el-input @change='tx_change' v-model="scope.row.namezh">
                                <template slot="prepend">角色编辑</template>
                            </el-input>
                        </div>
                        <div slot="reference" class="name-wrapper">
                            {{ scope.row.namezh }}
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    <el-button size="mini" type="info" slot="reference" @click="shouquan(scope.row)">授权</el-button>
                </template>

            </el-table-column>
        </el-table>
        <div class="block" style="float:right">
            <p></p>
            <el-pagination @current-change="handleCurrentChange" layout="total,prev, pager, next" :page-size="5" :total="total" background>
            </el-pagination>
        </div>
        <el-dialog title="权限编辑" :visible.sync="dialogVisible" width="30%" style="height:660px">
            <el-tree ref="tree2" :data="treeData" default-expand-all show-checkbox node-key="id" style="width:220px">
            </el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editTree()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { Loading } from "element-ui";
export default {
    data() {
        return {
            formInline: {
                namezh: "",
                ms: []
            },
            treeData:[],
            tableData: [],
            curNum: "",
            total: 0,
            dialogVisible: false,
            rid: "",
            tx_c_s: false //监听文本改变状态
        };
    },
    methods: {
        shouquan(row) {
            //角色授权
            this.dialogVisible = true;
            const params = new URLSearchParams();
            params.append("rid", row.id);
            this.rid = row.id;
            this.$http
                .post("/role/rmenuList", params) //获取当前角色的相关菜单列表
                .then(res => {
                    if (res.status == 200) {
                        this.$refs.tree2.setCheckedKeys(res.data.data);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        editTree() {
            //编辑树组件

            let arr = this.$refs.tree2.getCheckedKeys();
            let self = this;
            let app = this.zadd("/role/updateRoleMenu", {
                ms: arr,
                id: this.rid
            }).then(
                function(value) {
                    if (value.status === 200) {
                        self.dialogVisible = false;
                    }
                },
                function(error) {
                    console.log(error);
                }
            );
        },
        tx_change() {
            this.tx_c_s = true;
        },
        min_edit(index, row) {
            let self = this;
            if (this.tx_c_s) {
                this.zadd("/role/editRole", row).then(
                    function(value) {
                        if (value.status === 200) {
                            self.getList();
                        }
                    },
                    function(error) {}
                );
            }
            this.tx_c_s = false;
        },
        handleEdit(index, row) {
            this.userId = row.id;
            this.editFormVisible = true;
        },
        handleDelete(index, row) {
            this.zdel("/role/delRole", row.id);
        },
        onSubmit() {
            this.formInline.ms = this.$refs.tree.getCheckedKeys();
            let self = this;
            let app = this.zadd("/role/addRole", this.formInline).then(
                function(value) {
                    if (value.status === 200) {
                        self.getList();
                        self.clearData();
                    }
                },
                function(error) {
                    console.log(error);
                }
            );
        },
        handleCurrentChange(val) {
            this.curNum = val;
        },
        clearData() {
            this.formInline.namezh = "";
            this.$refs.tree.setCheckedKeys([]);
        },
        initTree(){
        var _this = this;
        this.$http
            .post("/role/menuList")
            .then(res => {
                if (res.status == 200) {
                    _this.treeData = res.data.data;
                }
            })
            .catch(err => {
                console.log(err);
            });
        },
        getList() {
            let self = this;
            let loadingInstance = Loading.service({
                target: ".el-table"
            });
            this.zpost(
                "/role/getRoleList", //请求地址
                this.curNum, //当前页
                this.formInline //查询参数
            ).then(
                function(value) {
                    
                    self.tableData = value.tableData || [];
                    self.total = value.total;
                },
                function(error) {
                    // failure
                    console.log(error);
                }
            );
            loadingInstance.close();
        }
    },
    mounted() {
        this.initTree();//初始化树
        this.getList();// 刷新列表

    },
    watch: {
        curNum() {
            this.getList();
        }
    }
};
</script>